<template>
	<view>
		<!-- 状态栏占位 -->
		<view class="statusDiv" :style="{ height: `${statusBarHeight}px`}"></view>
		<!-- 自定义导航 -->
		<view class="navigationBar" :style="{ height: `${barHeight}px`,top: `${statusBarHeight}px`}">
			<view class="navigationText" :style="{ height: `${barHeight}px`, 'line-height': `${barHeight}px`}">{{titleText}}</view>
			<view v-if="buttonCon" class="navigation-button" :style="{ height: `${barHeight}px`, 'line-height': `${barHeight}px`,top: `${statusBarHeight}px`}" @click="clickFun()">新增</view>
		</view>
		<!-- 状态栏导航总和占位内容 -->
		<view class="navigationWrap" :style="{ height: `${topHeight}px`}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// statusBarHeight: 0,
				// barHeight: 0,
				// topHeight: 0,
			}
		},
		props:{
			titleText: {
			  type: String,
			  default: ''
			},
			buttonCon: {
			  type: Boolean,
			  default: false
			},
		},
		onLaunch() {
		 //    // 状态栏高度
		 //    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
		 //    // 胶囊数据
		 //    const { top, height } = wx.getMenuButtonBoundingClientRect();
		 //    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
		 //    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			// // 自定义导航整体高度
			// this.topHeight = this.statusBarHeight + this.barHeight
			// console.log('aaaHei',this.statusBarHeight,this.barHeight,this.topHeight)
		},
		onShow() {
		},
		computed: {
			// 状态栏高度
			statusBarHeight() {
				return uni.getSystemInfoSync().statusBarHeight
			},
			// 胶囊数据
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			barHeight() {
				const { top, height } = wx.getMenuButtonBoundingClientRect();
				return height ? height + (top - this.statusBarHeight) * 2 : 38;
			},
			// 自定义导航整体高度
			topHeight() {
				let a = uni.getSystemInfoSync().statusBarHeight
				const { top, height } = wx.getMenuButtonBoundingClientRect();
				let b = height ? height + (top - this.statusBarHeight) * 2 : 38;
				return a + b
			},
		},
		methods: {
			clickFun() {
				this.$emit('linkClickAdd')
			},
		}
	}
</script>

<style>
	.statusDiv{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgb(248, 248, 248);
		/* background-color: #000; */
		z-index: 2;
	}
	.navigationBar {
		position: fixed;
		left: 0;
	    width: 100%;
		background-color: rgb(248, 248, 248);
		/* background-color: #000; */
		z-index: 2;
	}
	
	.navigationText{
		width: 100%;
		color: rgb(0, 0, 0);
		font-size: 17px;
		text-align: center;
		/* font-weight: bold; */
	}
	.navigation-button {
		position: fixed;
		left: 10px;
		width: 40px;
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		z-index: 9;
	}
	.navigationWrap{
		width: 100%;
	}
	
</style>
